import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { customHistory } from './utils/history'

// import Layout from './pages/Layout'
import { KeepAlive } from './components/keepAlive'
import Layout from '@/pages/Layout/index'
import Login from './pages/Login'
import ProfileEdit from '@/pages/Profile/Edit'
import Article from './pages/Article'
import Search from './pages/Search'
import SearchResult from '@/pages/Search/Result'
import Chat from '@/pages/Profile/Chat'
import { AuthRoute } from './components/AuthRoute'

import './App.scss'

const App = () => {
  return (
    <div className="app">
      <Router history={customHistory}>
        <KeepAlive path="/home">
          <Layout></Layout>
        </KeepAlive>

        <Switch>
          <Route
            path="/"
            exact
            render={() => <Redirect to="/home"></Redirect>}
          ></Route>
          {/* <Route path="/home" component={Layout}></Route> */}
          <Route path="/login" component={Login}></Route>
          <Route path="/articles/:id" component={Article}></Route>
          <Route path="/search" exact component={Search}></Route>
          <Route path="/search/result" component={SearchResult}></Route>
          {/* <Route path="/profile/edit" component={ProfileEdit}></Route> */}
          <AuthRoute path="/profile/edit">
            <ProfileEdit></ProfileEdit>
          </AuthRoute>
          <AuthRoute path="/chat">
            <Chat></Chat>
          </AuthRoute>
        </Switch>
      </Router>
    </div>
  )
}

export default App
